<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="日程" width="50%" align-center @close="handleClose">
      <ColumnsTable :columns="columns" :data="formValue">
        <template #value="{ scope: { col, prop } }">
          <template v-if="prop === 'taskTitle'">
            <span v-if="!editTitle"
              >{{ col
              }}<px-button
                v-if="data.taskStatus === 'UNDO' && editAble"
                style="margin-top: -2px"
                icon="EditPen"
                link
                type="primary"
                @click="editTitle = true"
            /></span>
            <px-input
              v-if="editTitle"
              v-model="formValue.taskTitle"
              placeholder="请输入日程描述"
              maxlength="50"
              clearable
              @blur="handleTaskTitleBlur"
            />
          </template>
          <template v-if="prop === 'taskFinishTime'">
            <span v-if="!editTime"
              >{{ renderTime(col)
              }}<px-button
                v-if="data.taskStatus === 'UNDO' && editAble"
                style="margin-top: -2px"
                icon="EditPen"
                link
                type="primary"
                @click="editTime = true"
            /></span>
            <px-date-picker
              v-if="editTime"
              v-model="formValue.taskFinishTime"
              :disabled-date="disabledDate"
              type="date"
              placeholder="请选择日期"
              clearable
              @blur="handleEdit"
            />
          </template>
          <template v-if="prop === 'taskStatus'">
            <div class="status">
              <div class="circle" :style="{ backgroundColor: `${TASK_STATUS[col]?.color}` }" />
              <p :style="{ color: `${TASK_STATUS[col]?.color}` }">
                {{ TASK_STATUS[col]?.label }}
              </p>
            </div>
          </template>
        </template>
      </ColumnsTable>
      <template #footer>
        <span class="dialog-footer">
          <px-popconfirm title="确定删除此日程?" width="180" @confirm="handleDelete">
            <template #reference>
              <px-button :loading="deleteLoading">删除</px-button>
            </template>
          </px-popconfirm>
          <px-button v-if="data.taskStatus === 'UNDO'" type="primary" :loading="handleLoading" @click="handleSubmit">完成日程</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import ColumnsTable from "@/views/all/equip/inspect/components/ColumnsTable.vue";
import { PxMessage } from "px-ui";
import { updateTask } from "@/api/bench";
import { cloneDeep } from "@pureadmin/utils";
import dayjs from "dayjs";
const props = defineProps(["data", "editAble"]);
const dialogVisible = defineModel("dialogVisible");
const columns = [
  [
    {
      label: "日程描述",
      value: "taskTitle"
    }
  ],
  [
    {
      label: "日程时间",
      value: "taskFinishTime"
    },
    {
      label: "日程状态",
      value: "taskStatus"
    }
  ]
];
const TASK_STATUS = {
  UNDO: {
    label: "未处理",
    color: "#F59E0B"
  },
  DONE: {
    label: "已处理",
    color: "#10B981"
  }
};
const emits = defineEmits(["refresh"]);
const deleteLoading = ref(false);

const editTitle = ref(false);
const editTime = ref(false);
const formValue = ref<any>({});
watchEffect(() => {
  if (dialogVisible.value) {
    formValue.value = cloneDeep(props.data) || {};
  }
});
const renderTime = time => {
  return time ? dayjs(time).format("YYYY-MM-DD") : "-";
};
const disabledDate = value => {
  const targetTime = dayjs(value).format("YYYYMMDD");
  const today = dayjs().format("YYYYMMDD");
  return targetTime < today;
};
const handleTaskTitleBlur = event => {
  formValue.value.taskTitle = event.target.value.trim();
  handleEdit();
};
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  editTitle.value = false;
  editTime.value = false;
};
// 删除
const handleDelete = async () => {
  deleteLoading.value = true;
  const { taskId } = props.data;
  try {
    await updateTask({ taskId, status: "INVALID" });
    emits("refresh", true);
    dialogVisible.value = false;
    PxMessage.success("删除成功");
    deleteLoading.value = false;
  } catch (error) {
    deleteLoading.value = false;
  }
};
const handleLoading = ref(false);
// 提交
const handleSubmit = async () => {
  handleLoading.value = true;
  const { taskId } = props.data;
  try {
    await updateTask({ taskId, taskStatus: "DONE" });
    dialogVisible.value = false;
    handleLoading.value = false;
    emits("refresh", true);
    PxMessage.success("已完成");
  } catch (error) {
    handleLoading.value = false;
  }
};
// 编辑
const handleEdit = async () => {
  const { taskTitle, taskFinishTime } = formValue.value;
  if (!taskTitle) {
    return PxMessage.error("请输入日程描述");
  }
  if (!taskFinishTime) {
    return PxMessage.error("日程时间不能为空");
  }
  const taskTime = taskFinishTime ? dayjs(taskFinishTime).format("YYYY-MM-DD 23:59:59") : taskFinishTime;
  await updateTask({ ...formValue.value, taskTime, taskFinishTime: taskTime });
  editTitle.value = false;
  editTime.value = false;
  emits("refresh", true);
  PxMessage.success("编辑成功");
};
</script>
<style lang="scss" scoped>
.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}
:deep(.px-dialog__footer) {
  padding: 0 32px;
}
.status {
  display: flex;
  flex-direction: row;
  align-items: center;

  .circle {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
  }
}
</style>
